<!-- 游客论坛 -->
<template>
  <div class="forum">

    <div class="tob-con">
      <div class="breadcrumb">
        您当前的位置：
        <span>游客论坛 > </span>&nbsp;
        <span style="cursor: default;" class="activeShow" @click="breadcrumbClick">{{this.$route.query.title}}</span>&nbsp;

        <span style="cursor: default;">
          <span> > </span>&nbsp;
          <span>详情</span>
        </span>
      </div>

    </div>

    <div class="abstracts-con">
      <h3>{{this.$route.query.title}}</h3>

      <div class="list-subtitle">
        <span>来源：{{this.$route.query.createByStr || '-'}}</span>&nbsp;&nbsp;&nbsp;&nbsp;
        <span>发布：{{this.$route.query.updateAt || '-'}}</span>
      </div>

      <div v-if="this.$route.query.abstracts !== ''" class="horizontal-span-con-abstracts">
        <p><b>摘要：</b> {{this.$route.query.abstracts}}</p>
      </div>

      <div class="detailsItem">
        <span v-html="shoppingDetailData || '-'"></span>
      </div>

    </div>

  </div>
</template>

<script>
import scrollAnimation from '@/api/scrollAnimation.js'

export default {
  data () {
    return {
      breadcrumbBool: false,
      forumItem: {},
      shoppingDetailData: ''
    }
  },
  components: {},
  computed: {},
  created () {
    this.shoppingDetailData = ''
    this._getcontentCon(this.$route.params.contentId)
  },
  watch: {
    '$route' (to, from) {
      if (to.name === 'ForumDetails') {
        this._getcontentCon(this.$route.params.contentId)
      }
    }
  },
  mounted () {
    const needScrollTop = document.documentElement.scrollTop || document.body.scrollTop || window.pageYOffset || 0
    scrollAnimation(needScrollTop, 0)
  },
  methods: {
    breadcrumbClick () {
      this.$router.go(-1)
    },
    _getcontentCon (contentId) {
      this.$http.get(`/v1/contentDesc/${contentId}`).then(res => {
        this.shoppingDetailData = res.contentHtml
      })
    }
  }
}

</script>

<style lang='stylus' rel='stylesheet/stylus' scoped>

.tob-con {
  .breadcrumb {
    padding 20px 0 20px 15%
    display flex
    align-items center
    margin-bottom 20px
    box-shadow 0 0 10px 2px #ddd
  }
}

.activeShow {
  color #39ADFF
}

.horizontal-span-con-abstracts {
  background rgba(0,0,0,0.04)
  text-align left
  padding 10px
  margin 10px 0
  font-size 14px
  line-height 2
}

.abstracts-con {
  width 80%
  margin 0 auto
}

.list-subtitle {
  margin 15px 0
}

.detailsItem {
  line-height 2
  span {
    background-color none !important
    p {
      font-size 16px !important
      text-align left
      background-color none !important
      span {
        font-size 16px !important
        background-color transparent !important
      }
      img {
        width 100%
        margin 0 auto
      }
    }
  }
}
</style>
